<template>
	<view class="my">
		<view class="box-bg">
		
		</view>
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<view class="yujing-word1">
		<image src="@/static/icon/icon14.png" mode="" class="img2" @click="to_shezhi()"></image>
			<view class="word1-word">
				我的
			</view>
		</view>
		<view class="my-img">
			<image :src="photoPath" mode=""></image>
			<view class="my-box1">
				<view class="my-name">
					{{userName}}
				</view>
				<view class="my-id">
					id:{{userId}}
				</view>
				<view class="img-img">
					<image src="@/static/icon/icon15.png" mode="" type="primary" @click="showDrawer('showRight')" ></image>
					<uni-drawer ref="showRight" mode="right" :mask-click="false" @change="change($event,'showRight')" width=" 220" >
						<view class="scroll-view">
							<scroll-view class="scroll-view-box" scroll-y="true">
								<view class="scroll-view-img">
									
								</view>
								<view class="my-box3" @click="photo()">
									<text>头像</text>
									
									<image :src="photoPath" mode=""></image>
								</view>
								<view class="my-box3">
									<text>昵称</text>
									<input type="text" :value="userName" unselectable="on">
									<view class="name-img">
										<image src="@/static/icon/icon16.png" mode=""></image>
									</view>
								</view>
								<view class="my-box3">
									<text>账号</text>
									<view class="box3-word">
										{{userId}}
									</view>
								</view>
								<view class="my-box3">
									<text>地区</text>
									<view class="box3-word">
										浙江嘉兴市
									</view>
								</view>
								<view class="my-box3">
									<text>地址</text>
									<view class="box4-word">
										嘉兴职业技术学院
									</view>
								</view>
								<view class="my-box3">
									<text>身份证号</text>
									<view class="box4-word">
										3***************5
									</view>
								</view>
								<view class="my-box3">
									<text>联系电话</text>
									<view class="box5-word">
										17888888888
									</view>
								</view>
								<view class="my-box4">
									<text class="my-text">已实名认证</text>
									
								</view>
								<view class="close">
									
									<button  @click="closeDrawer('showRight')"><text class="word-btn-white">关闭</text></button>
								</view>
							</scroll-view>
						</view>
					</uni-drawer>
				</view>
			</view>
		</view>
		<view class="my-box2">
			<view class="my-word">
				<view class="my-word1" v-bind:class="{borders:isactive}" @click="my_click1()">
					作品
				</view>
				<view class="my-word2" v-bind:class="{borders:isdzactive}" @click="my_click2()">
					点赞
				</view>
			</view>
			<view class="xuanchuan-box" v-bind:class="{active:isactive}">
				<view class="box-word1">
					虚假网贷App调查：号称“低息贷款”仿冒金融
					虚假网贷App调查：号称“低息贷款”仿冒金融
					虚假网贷App调查：号称“低息贷款”仿冒金融
					虚假网贷App调查：号称“低息贷款”仿冒金融
				</view>
				<view class="box-word2">
					瞒不住
				</view>
				<view class="box-word3">
					2022-07-14
				</view>
				<image src="@/static/logo.png" mode=""></image>
			</view>
			<view class="xuanchuan-box" v-bind:class="{active:isdzactive}">
				<view class="box-word1">
					虚假网贷App调查：号称“低息贷款”仿冒金融
					虚假网贷App调查：号称“低息贷款”仿冒金融
					虚假网贷App调查：号称“低息贷款”仿冒金融
					虚假网贷App调查：号称“低息贷款”仿冒金融
				</view>
				<view class="box-word2">
					发布时间
				</view>
				<view class="box-word3">
					2022-07-14
				</view>
				<image src="@/static/logo.png" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {
			
		},
		data() {
			return {
				photoPath:'../../static/icon/jxvtc.jpg',
				imageStyles: {
					width: 64,
					height: 64,
					border: {
						radius: '50%'
					}
				},
				listStyles: {
					// 是否显示边框
					border: true,
					// 是否显示分隔线
					dividline: true,
					// 线条样式
					borderStyle: {
						width: 1,
						color: 'blue',
						style: 'dashed',
						radius: 2
					}
				},
				isactive:true,
				isdzactive:false,
				showRight: false,
				userName:"天下无诈",
				userId:"88888888"
			}
		},
		onShow() {
			
		},
		
		methods: {
			photo() {
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						this.photoPath = tempFilePaths[0];
						uni.setStorage({
							key:"localPhotoPath",
							data:this.photoPath,
							success:function(){
								console.log("保存成功")
							}
						})
					
						// console.log(this.photoPath)
						
						// uni.navigateTo({
						// 	url:'/pages/my/my?photo=10'
						// })
					}
				})
			},
			to_shezhi(){
				uni.navigateTo({
					url:"/pages/shouye/app-map"
				})
			},
			to_shouye(){
				uni.switchTab({
					url:"../shouye"
				})
			},
			my_click1(){
				this.isactive=true
				this.isdzactive=!this.isdzactive
				console.log("this.isactive:"+this.isactive);
				console.log("this.isdzactive:"+this.isdzactive);
			},
			my_click2(){
				this.isdzactive=true
				this.isactive=!this.isactive
				console.log("this.isactive:"+this.isactive);
				console.log("this.isdzactive:"+this.isdzactive);
			},
			confirm() {},
			// 打开窗口
			showDrawer(e) {
				this.$refs[e].open()
			},
			// 关闭窗口
			closeDrawer(e) {
				this.$refs[e].close()
			},
			// 抽屉状态发生变化触发
			change(e, type) {
				console.log((type === 'showLeft' ? '左窗口' : '右窗口') + (e ? '打开' : '关闭'));
				this[type] = e
			}
		},
		onNavigationBarButtonTap(e) {
			if (this.showLeft) {
				this.$refs.showLeft.close()
			} else {
				this.$refs.showLeft.open()
			}
		},
		// app端拦截返回事件 ，仅app端生效
		onBackPress() {
			if (this.showRight || this.showLeft) {
				this.$refs.showLeft.close()
				this.$refs.showRight.close()
				return true
			}
		},
		
	}
</script>


<style>
	page {
		background-image: url(@/static/bg.png);
		background-repeat: no-repeat;
		background-attachment: fixed;
		background-size: 100% 100%;
	}
	
	* {
		padding: 0%;
		margin: 0%;
	}
	
	image {
		display: flex;
	}
	.yujing-word1{
		width: 90%;
		height: 100rpx;
		margin: auto;
		margin-top: 40rpx;
		position: relative;
		
	}
	.word1-word{
		color: white;
		font-size: 40rpx;
		text-align: center;
		letter-spacing: 15rpx;
		
	}
	.yujing-word1 image{
		width: 70rpx;
		height: 70rpx;
		margin-top: 10rpx;
		position: absolute;
		top: 0;
		right: 30rpx;
	}
	.my-img image{
		width: 180rpx;
		height: 180rpx;
		border-radius: 20rpx;
		position: absolute;
		left: 40rpx;
	}
	.my-box1{
		width: 200rpx;
		height: 100rpx;
		
		font-size: 35rpx;
		line-height: 60rpx;
		position: absolute;
		left: 240rpx;
		top: 120rpx;
		color: white;
	}
	.my-box2{
		width: 90%;
		height: 1000rpx;
		background-color: white;
		margin: auto;
		margin-top: 250rpx;
		
	}
	.my-word{
		
		height: 50rpx;
		width: 180rpx;
		font-size: 35rpx;
		position: relative;
	}
	.my-word1{
		position: absolute;
		left: 10rpx;
		
	}
	.my-word2{
		position: absolute;
		left: 100rpx;
		
	}
	.xuanchuan-word{
		width: 92%;
		margin: auto;
		margin-top: 20rpx;
		font-weight: bold;
	}
	.xuanchuan-box{
		width: 92%;
		height: 180rpx;
		border: #8c8c8c 1px solid;
		margin:30rpx auto;
		border-radius: 20rpx;
		box-shadow: #8c8c8c 5rpx 5rpx;
		position: relative;
		background-color: #ffffff;
	}
	.box-word1{
		width: 400rpx;
		height: 83rpx;
		font-size: 30rpx;
		overflow: hidden;
		position: absolute;
		top: 40rpx;
		left: 40rpx;
		
	}
	.box-word2{
		color: #c3c3c3;
		font-size: 10rpx;
		position: absolute;
		top: 130rpx;
		left: 40rpx;
	}
	.box-word3{
		color: #c3c3c3;
		font-size: 10rpx;
		position: absolute;
		top: 130rpx;
		left:150rpx;
	}
	.xuanchuan-box image{
		width: 130rpx;
		height: 130rpx;
		position: absolute;
		top: 28rpx;
		right: 40rpx;
	}
	.active{
		display: none;
	}
	.borders{
		border-bottom: 1rpx solid black;
	}
	.img-img image{
		width: 60rpx;
		height: 60rpx;
		position: absolute;
		left: 378rpx;
		top: 45rpx;
	}
	.example-body {
		padding: 10px;
	}
	.scroll-view {
		/* #ifndef APP-NVUE */
		width: 100%;
		height: 100%;
		/* #endif */
		flex:1
	}
	// 处理抽屉内容滚动
	.scroll-view-box {
		flex: 1;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}
	.info {
		padding: 15px;
		color: #666;
	}
	
	.info-text {
		font-size: 14px;
		color: #666;
	}
	.info-content {
		padding: 5px 15px;
	}
	.close {
		padding: 10px;
		
	}
	.close text{
		color: red;
	}
	.close button{
		border-radius: 30rpx;
	}
	.scroll-view-img{
		width: 100rpx;
		height: 100rpx;
		background: url(@/static/icon/icon17.png) ;
		background-repeat: no-repeat;
		background-size: 80rpx 80rpx;
		margin-left: 30rpx;
		margin-top: 30rpx;
	}
	.my-box3{
		width: 90%;
		height: 130rpx;
		border-bottom: 1rpx solid #ccc;
		margin: auto;
		position: relative;
		color: black;
		line-height: 130rpx;
	}
		
	.my-box3 uni-section{
		position: absolute;
		top: 0;
		left: 150rpx;
	}
	.my-box4{
		width: 90%;
		height: 80rpx;
		
		margin: auto;
		position: relative;
		color: black;
		line-height: 80rpx;
		text-align: center;
		color: #ccc;
		font-size: 25rpx;
	}
	.my-box3 text{
		padding-left: 30rpx;
	}
	.my-box3 image{
		width: 100rpx;
		height: 100rpx;
		position: absolute;
		left: 250rpx;
		top: 20rpx;
		border-radius: 30rpx;
	}
	.my-box3 input{
		position: absolute;
		left: 150rpx;
		top: 45rpx;
	}
	.name-img image{
		width: 50rpx;
		height: 50rpx;
		position: absolute;
		left: 310rpx;
		top: 45rpx;
	}
	.box3-word{
		position:absolute;
		left: 200rpx;
		top: 0rpx;
		color: black;
	}
	.box4-word{
		font-size: 20rpx;
		position:absolute;
		left: 180rpx;
		top: 0rpx;
		color: black;
	}
	.box5-word{
		font-size: 20rpx;
		position:absolute;
		left: 210rpx;
		top: 0rpx;
		color: black;
	}
	.example-body {
		padding: 10px;
		padding-top: 0;
	}
	
	.custom-image-box {
		/* #ifndef APP-NVUE */
		
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border-radius: 50rpx;
		background: url(@/static/anli/dianxin.jpg) ;
		background-repeat: no-repeat;
		background-size: 100rpx 100rpx;
		
	}
	
	.text {
		font-size: 14px;
		color: #333;
	}
</style>